<template>
  <div>
    <div id="line1"></div>
  </div>
</template>

    <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
    this.fetchList()
  },
  methods: {
    async fetchList() {
      console.log("获取数据中")
      const response = await this.$http.get("metrics/top5_ip_count")
      if (response.status == 200) {
        const data = response.data;
        this.province = data.map(item => item.ip)
        this.usercount = data.map(item => item.value)
        this.updateChartData()
      }
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("line1"));

      this.chart.setOption({
        title: {
          text: "发帖用户数",
          textStyle: {
            color: "#d1e6eb",
            fontSize: 20
          },
          left: "center",
          top: "0"
          // subtext: '纯属虚构'
        },
        tooltip: {},
        grid: {
          top: "8%",
          left: "1%",
          right: "1%",
          top: "20%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          itemGap: 50,
          data: ["注册总量", "最新注册量"],
          top: "30",
          textStyle: {
            color: "#f9f9f9",
            borderColor: "#fff"
          }
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#f9f9f9"
              }
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#d1e6eb",
                margin: 15
              }
            },
            axisTick: {
              show: false
            },
            data: ["广东", "四川", "北京", "东北", "吉林"]
          }
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 7,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0a3256"
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: "#d1e6eb"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          // {
          //   name: "注册总量",
          //   type: "line",
          //   // smooth: true, //是否平滑曲线显示
          //   // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          //   showAllSymbol: true,
          //   symbol: "emptyCircle",
          //   symbolSize: 6,
          //   lineStyle: {
          //     normal: {
          //       color: "#28ffb3" // 线条颜色
          //     },
          //     borderColor: "#f0f"
          //   },
          //   label: {
          //     show: true,
          //     position: "top",
          //     textStyle: {
          //       color: "#fff"
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#28ffb3"
          //     }
          //   },
          //   tooltip: {
          //     show: false
          //   },
          //
          //   data: [393, 438, 485, 631, 689, 824, 987]
          // },
          {
            type: "bar",
            barWidth: 20,
            tooltip: {
              show: false
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff"
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = [
                    "#0ec1ff",
                    "#10cdff",
                    "#12daff",
                    "#15ebff",
                    "#17f8ff",
                    "#1cfffb",
                    "#1dfff1"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            data: [0, 0, 0, 0, 0, 0, 0]
          }
        ]
      });
    },
    updateChartData(){
      this.chart.setOption({
        xAxis: [{data: this.province}],
        series: [{data: this.usercount}]
      })

    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

    <style lang="scss" scoped>
#line1 {
  width: 100%;
  height: 33vh;
}
</style>